<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
	</head>
	<body>
		<!-- 头部导航栏 -->
		<div class="top-header">
			<a href="register.html" class="top-item" style="color: #888888;">注册</a>
			<a href="login.html" class="top-item" style="color: #888888;">登录</a>
		</div>
		
		<!-- 头部搜索栏 -->
		<div class="bottom-header">
			<div class="bottom-content">
				<div style="flex: 1;">
					<a href="index.html">
					<img src="img/logo.gif" width="157" height="50">
					</a>
				</div>
				<div style="flex: 2; text-align: center;">
					<input type="text" placeholder="请输入查询关键词" class="bottom-header-input"/>
					<button type="button" class="bottom-header-btn">搜索</button>
				</div>
				<div  class="cart-btn" style="flex: 1; text-align: right; position: relative;">
					<a href="">
						<img src="img/Shopping-cart-1@3x.png" width="20" height="20">
					</a>
					<div class="cart-box">
						
						<!-- 购物车头部 -->
						<h3>购物车</h3>
						
						<!-- 购物车中间 -->
						<div style="display: flex; align-items: center;">
							<div style="padding: 0px 10px;">
								<img src="img/100.jpg" width="50" height="50">
							</div>
							<div style="font-size: 12px;">
								<p class="text-hidden">
									<span style="color: red;">1</span>
									<span>寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果</span>
								</p>
								<p style="text-align: left; color: red;">0.7</p>
							</div>
						</div>
						
						<!-- 购物车底部 -->
						<div class="cart-bottom">
							<div class="left">
								<span>共:  ￥0.73</span>
							</div>
							<div class="right">
								查看购物车
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 头部标题栏 -->
		<section class="header-title">
			<div class="title-content">
				<p>我的购物车</p>
				<a href="index.html" style="color: #303133;"><b>首页</b></a> > <span>购物车</span>
			</div>
		</section>
		
		<!-- 主题部分 -->
		<div class="cart-body">
			<div class="cart-left">
				<table bcellspacing="0" cellpadding="0">
					<tr style="height: 50px;">
						<th style="width: 800px; text-align: left; padding-left: 15px;">产品名称</th>
						<th style="width: 200px;">数量</th>
						<th style="width: 200px;">合计价格</th>
						<th style="width: 100px;"></th>
					</tr>
					<tr>
						<td>
							<div class="product-name">
								<img src="img/100.jpg" width="50" height="50" >
								<a href="">寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果</a>
							</div>
						</td>
						<td>
							<div style="display: flex; flex-direction: column; align-items: center; margin-top: 20px;">
									<div class="input-number">
										<span style="border-top-left-radius: 4px; border-bottom-left-radius: 4px;" class="input-number-operation">-</span>
										<input  class="input-number-center" style="color: #666;" type="text" value="1"/>
										<span style="border-top-right-radius: 4px; border-bottom-right-radius: 4px;"  class="input-number-operation">+</span>
									</div>
									<div>
										<span>x￥0.73</span>
									</div>
								</div>
							</div>
						</td>
						<td style="text-align: center;">
							<b>￥0.73</b>
						</td>
						<td>
							<div class="button button-star">
								<img src="img/garbage.png" width="20" height="20">
							</div>
						</td>
					</tr>
				</table>
				<div style="text-align: right;margin-top: 10px;">
					<button type="button" class="button button-delete">
						<img class="before-img" src="img/garbageRed.png" width="20" height="20">
						<img class="after-img" src="img/garbage.png" width="20" height="20">
						清空购物车
					</button>
					<button type="button" class="button button-success">√更新购物车</button>
				</div>
			</div>
			<div class="cart-right">
					<div class="text-info">
						<b>商品总价:</b>
						<span>￥0.73</span>
					</div>
					<div class="text-info">
						<span>物流费用:</span>
						<span>包邮</span>
					</div>
					<hr style="margin: 20px 0;"/>
					<div class="text-info">
						<b>合计金额:</b>
						<span style="font-size: 20px;">￥0.73</span>
					</div>
				<div style="text-align: right;margin-top: 20px;">
					<button type="button" class="button button-success">√立即支付</button>
				</div>
			
			</div>
		</div>
	
		<!-- 底部 -->
		<div class="footer">
			<p>全国高职院校Web应用软件开发技能竞赛</p>
		</div>
	</body>
</html>